<template>
	<div id="progress-line" style="padding:16px">
		<div v-for="(item, index) in dataList" :key="index" class="wrap">
			<div class="item1" :title="item.name" style="text-align:left;">
				{{ item.name }}
			</div>
			<div class="item2">
				<el-progress
					:percentage="item.percent"
					:stroke-width="strokeWidth"
					:color="item.color"
					:show-text="false"
				/>
			</div>
			<div class="item1 item3">
				{{ item.value }}
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		strokeWidth: {
			type: Number,
			default: 12
		},
		dataList: {
			type: Array,
			default: function() {
				return [
					{ name: "科研用源", number: 70, color: "#4a90e2" },
					{ name: "测厚仪", number: 60, color: "#50e3c2" },
					{ name: "探伤机", number: 50, color: "#ff9b53" },
					{ name: "医用源", number: 40, color: "#d03702" },
					{ name: "XXX源", number: 30, color: "#e1da83" }
				];
			}
		}
	},
	data() {
		return {};
	},
	mounted() {},
	beforeDestroy() {},
	methods: {}
};
</script>
<style lang="scss">
#progress-line {
	.wrap {
		display: flex;
		color: #fff;
		margin-bottom: 20px;
		padding-left: 10px;
		.item1 {
			text-align: center;
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 16px;
			line-height: 1;
			height: 20px;
			padding-left: 4px;
		}
		.item2 {
			flex: 3;
			margin-top: 2px;
		}
		.item3 {
			flex: 1;
		}
	}
	.el-progress-bar__outer {
		background: #091048;
		font-size: 16px;
	}
}
</style>
